<script setup lang="ts">
import {ref} from "vue";

const boxes = ref([
  { label: '系统资源', highlighted: false },
  { label: '我的资源', highlighted: false },
  { label: '数据', highlighted: false },
  { label: '结构', highlighted: false }
])

// 点击盒子时触发的方法
function highlightBox(index: number) {
  // 清除所有盒子的高亮状态
  boxes.value.forEach(box => {
    box.highlighted = false
  })
  // 设置当前点击的盒子为高亮状态
  boxes.value[index].highlighted = true
}
</script>

<template>
  <div class="header">
    <!-- 添加四个可点击的 div -->
    <div v-for="(box, index) in boxes" :key="index" @click="highlightBox(index)">
      <div class="box" :class="{ 'highlighted': box.highlighted }">
        {{ box.label }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.header{
  height: 5vh;
  width:100vw;
  background: #304156;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平居左 */
}

.box-container {
  display: flex; /* 使用 flex 布局 */
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 如果盒子总宽度超出容器宽度，则隐藏溢出部分 */
}

.box {
  margin-right: 5px; /* 盒子之间的间距 */
  padding: 5px;
  background-color: #304156;
  border: none;
  cursor: pointer;
  flex-shrink: 0; /* 确保盒子不会缩小 */
}

.highlighted {
  background-color: deepskyblue; /* 高亮颜色 */
}
</style>